<template>
  <div>
    <v-header :showback="false" v-if="!insq">
      <SearchBox :type="1" :qzone='insq'></SearchBox>
    </v-header>
    <div class="article_label">
      <div class="top_slidemenu">
        <swiper :options="swiperArtMenu" class="swiper-container news_swiper">
          <swiper-slide v-for="(c,index) in newsAllCates" :key='c.id'>
            <div class="free_label" @click="tabCateArticle(c.id,index)" :class="{clicked:newsCateId==c.id}">
              <span>{{c.name}}</span>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="news-list" :class="{ios:insq && $root.ISIOS}">
      <!-- <v-list :load-handle='reload' :more-handle='loadmore' :more-handling='isLoading' :isend='isEnd'> -->
      <div v-infinite-scroll="loadmore" infinite-scroll-disabled="isEnd" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
        <!-- <ArticleUnit v-for="item in firstThreeLists" :key="item.id" :unit="item" class="news_unit"></ArticleUnit> -->
        <template v-for="(item,idx) in reallist">
          <BrandSwiper :brandList="brandList" v-if="idx===3&&brandList&&brandList.length>0" :qzone='insq'></BrandSwiper>
          <shoe-swiper v-if="showStockX&&idx===3" :key="idx+'stockx'" :shoes="stockX" :type="1" :qzone='insq'></shoe-swiper>
          <div v-if="idx===3&&newsCateId == 1" :key="idx+'brandShoes'" class="brand_shoes gaps">
            <ul class="clearfix">
              <li v-for="l in brandShoes" :key="l.id" @click="goNext(l.url)">
                <!-- <router-link :to="l.url"> -->
                <img v-lazy="https(l.coverurl)" alt="">
                <p class="flex-center">
                  <img :src="l.iconurl|https" alt="">
                  <span>{{l.name}}</span>
                </p>
                <!-- </router-link> -->
              </li>
            </ul>
          </div>
          <ArticleUnit :key="item.id" :unit="item" class="news_unit" :qzone='insq'></ArticleUnit>
        </template>
        <!-- <p class="no-more" v-if="insq" @click="loadmore" v-show='!isEnd&&!isLoading'>点击加载更多</p> -->
        <p class='no-more' v-show="isEnd">已经到底啦~~</p>
        <p class='load-more' :class='{act:isLoading}' v-show='!isEnd'>
          <span>努力加载中</span>
        </p>
      </div>
      <!-- </v-list> -->
      <div v-if="!isLoading&&list.length<1" class="noNews">
        <img :src="noNews" alt="">
        <p>没有找到相关的资讯</p>
      </div>
    </div>
  </div>
</template>
<script>
import { GetArticleCategory, ArticleSearch } from '../../common/api/article'
import SearchBox from '../templates/SearchBox'
import ShoeSwiper from '../templates/ShoeSwiper'
import BrandSwiper from '../templates/BrandSwiper'
import ArticleUnit from '../templates/ArticleUnit'
// import { endWithGif } from '../../common/util'
import { mapGetters } from 'vuex'

var loaded = false
export default {
  data() {
    return {
      scrollTemp: 0,
      allCategory: [{ id: '1', name: '推荐' }, { id: '0', name: '人气' }],
      swiperArtMenu: {
        slidesPerView: 'auto',
        freeMode: true // ,
        // slideToClickedSlide: true
      },
      list: [],
      isEnd: false,
      isLoading: false,
      paramOb: { pageindex: 1, sorttype: 0 },
      currentInd: 's',
      stockXcid: '',
      stockX: [],
      brandList: [],
      brandid: '',
      noNews: '//files.eyee.com/mcdn/static/img/no_news.png', // require('../../assets/img/no_news.png'),
      IdData: '',
      // firstThreeLists: [],
      brandShoes: [
        { url: '/brand', coverurl: 'http://files.eyee.com/eyeeh5/img/brand_logo0.png', name: '品牌百科', iconurl: '//files.eyee.com/mcdn/static/img/sneaker/brand_logo1.png' }, // require('../../assets/img/sneaker/brand_logo1.png')
        { url: '/shoe', coverurl: 'http://files.eyee.com/eyeeh5/img/shoe_logo0.png', name: '潮鞋榜单', iconurl: '//files.eyee.com/mcdn/static/img/sneaker/shoe_logo1.png' }, // require('../../assets/img/sneaker/shoe_logo1.png')
        { url: '/shoe/sales', coverurl: 'http://files.eyee.com/eyeeh5/img/sale_logo0.png', name: '发售日历', iconurl: '//files.eyee.com/mcdn/static/img/sneaker/sale_logo1.png' } // require('../../assets/img/sneaker/sale_logo1.png')
      ]
    }
  },
  computed: {
    ...mapGetters({ insq: 'insq', newsCateId: 'newsCateId', newsAllCates: 'newsAllCates' }),
    reallist() {
      let list = this.list
      console.log('reallist', list)
      return list
    },
    showStockX() {
      return this.stockXcid == this.$route.params.id && this.stockX && this.stockX.length > 0
    },
    showBrand() {
      return this.brandid == this.$route.params.id && this.brandList && this.brandList.length > 0
    }
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.url = from.path
      // console.log(from.path)
      // if (vm.url.indexOf('/news/detail/') != -1) {
      //   vm.tabCateArticle(1, 0)
      //   vm.$router.push('/news/' + 1)
      // }
    })
  },
  mounted() {
    let id = (this.$route.params.id || this.$route.params.id != '0') ? '1' : this.$route.params.id
    this.$store.dispatch('setNewsCateId', id)
    //  console.log(this.newsCateId,'zsj------------------------------')
    // this.$router.push('/news/' + this.newsCateId)
    this.getCate()
    this.initShare({ type: 0 })
    this.reload()
    if (this.insq && this.$root.ISIOS) window.document.querySelector('.news-list').addEventListener('touchmove', this.moveScroll)
  },
  beforeDestroy() {
    if (this.insq && this.$root.ISIOS) {
      let ele = window.document.querySelector('.news-list')
      ele && ele.addEventListener('touchmove', this.moveScroll)
    }
  },
  components: {
    ArticleUnit,
    ShoeSwiper,
    BrandSwiper,
    SearchBox
  },
  methods: {
    moveScroll() {
      let ele = window.document.querySelector('.news-list')
      let cont = window.document.querySelector('.news-list > div')
      // console.error('moveScroll', ele.scrollTop, cont.scrollHeight, ele.clientHeight)
      if (ele.scrollTop >= cont.scrollHeight - ele.clientHeight) {
        this.scrollTemp = ele.scrollTop
        this.loadmore()
      }
    },
    getCate: function () {
      var _ = this
      if (_.newsAllCates && _.newsAllCates.length > 0) {
        _.allCategory = _.newsAllCates
        return
      }
      GetArticleCategory()
        .then(function (res) {
          console.log('res', res)
          if (res) {
            for (var i = 0; i < res.length; i++) {
              if (res[i].child) {
                for (var j = 0; j < res[i].child.length; j++) {
                  _.allCategory.push(res[i].child[j])
                }
              }
            }
            // _.$store.dispatch('setNewsAllCates', _.allCategory)
            // console.log(_.allCategory)
          } else {
            console.log('Internet busy')
          }
          _.$store.dispatch('setNewsAllCates', _.allCategory)
        })
        .catch(e => {
          console.error('GetArticleCategory', e)
        })
    },
    reload($el) {
      // this.initShare({ type: 0 })
      this.list = []
      this.paramOb.pageindex = 1
      this.isEnd = false
      this.req()
    },
    loadmore($el) {
      if (this.isLoading) return
      if (this.isEnd === true) {
        this.toast('已无更多')
      } else {
        this.paramOb.pageindex++
        this.req()
      }
    },
    req() {
      this.isLoading = true
      let page = this.pagedata
      let id = this.newsCateId

      this.paramOb.sorttype = 0
      if (id == 0) {
        this.paramOb.sorttype = 1
        delete this.paramOb.categoryid
      } else if (id == 1) {
        delete this.paramOb.categoryid
      } else {
        this.paramOb.categoryid = id
      }
      console.log('news home search param', this.paramOb)
      ArticleSearch(this.paramOb)
        .then(res => {
          console.log('Article Home Search', res)
          if (res.brandlib && res.brandlib.length > 0) {
            // console.log('brandlsisis')
            this.brandList = res.brandlib
            this.brandid = this.$route.params.id
          } else {
            this.brandList = []
            this.brandid = ''
          }
          if (res.stockx && res.stockx.length > 0) {
            this.stockX = res.stockx
            this.stockXcid = this.$route.params.id
          } else {
            this.stockX = []
            this.stockXcid = ''
          }
          if (res && res.article) {
            // if (res.pageindex == 1) {
            //   this.firstThreeLists = []
            //   for (let i = 0; i < 3; i++) {
            //     let temp = res.article.list.shift()
            //     this.firstThreeLists.push(temp)
            //   }

            //   console.log('firstThrees', this.firstThreeLists)
            //   this.list = res.article.list
            // } else {
            //   this.list.push(...res.article.list)
            // }
            this.list = this.list.concat(res.article.list)
            if (res.article.pageindex > 0) {
              this.paramOb.pageindex = res.article.pageindex
            }

            if (res.article.pageindex * res.article.pagesize >= res.article.sumcount) {
              this.isEnd = true
            }
          }
          this.isLoading = false

          // if (this.insq && this.scrollTemp > 0) {
          //   console.error('---scrollTo' + this.scrollTemp)
          //   window.scrollTo(0, this.scrollTemp)
          // }

          if (!loaded) {
            loaded = true
            this.$nextTick(() => {
              window.chaowuapi && window.chaowuapi.dispatchEvent('loadedIframe')
            })
          }
        })
        .catch(e => {
          this.isLoading = false
          this.toast(e && e.msg ? e.msg : 'error:' + e)
        })
    },
    tabCateArticle: function (id, index) {
      let _ = this
      _.brandList = []
      _.brandid = ''
      _.stockX = []
      _.stockXcid = ''

      // if (_.$route.params.id != id) {
      let path = _.$route.fullPath
      // _.firstThreeLists = []
      // console.log('firrrrrrr', _.firstThreeLists)
      _.$store.dispatch('setNewsCateId', id)
      // console.log(_.newsCateId,'zsj')
      _.$router.push((/^\/qnews\/?/.test(path) ? '/qnews/' : '/news/') + id)
      _.reload()
      // }
    },
    goNext(url) {
      console.log('goNext', url)
      this.insq ? this.qzoneGo(url) : this.$router.push(url)
    }
  }
}
</script>
<style scoped>
.news-list {
  padding-top: 10px;
}
.news-list.ios {
  position: fixed;
  width: 100%;
  height: 100%;
  height: calc(100% - 36px);
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
.sc-input {
  width: 100%;
}

img {
  display: block;
  width: 100%;
}

.article_label {
  height: 36px;
  line-height: 36px;
  position: relative;
}

.article_label .top_slidemenu {
  position: fixed;
  background-color: #fff;
  height: 36px;
  width: 100%;
  z-index: 1;
}

.free_label {
  color: #333;
  font-size: 14px;
  padding: 0 10px;
  /* padding: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis; */
}

.article_label .free_label.clicked > span {
  display: inline-block;
  height: 36px;
  padding: 0;
  border-bottom: 2px solid #333;
}

.brand_shoes {
  padding: 15px 5px;
}

.brand_shoes ul li {
  float: left;
  width: 33.33%;
  padding: 0 5px;
  border-radius: 2px;
  overflow: hidden;
}

.brand_shoes ul li p {
  height: 28px;
}
.brand_shoes ul li p img {
  /* display: inline-block; */
  /* height: 28px; */
  width: 28px;
  margin-right: 3px;
}

.brand_shoes ul li p span {
  font-size: 13px;
}

.noNews {
  width: 40vw;
  font-size: 0.75rem;
  text-align: center;
  margin: 20% auto;
}

.noNews img {
  width: 45%;
  margin: 0 auto;
  margin-bottom: 5%;
}
.news_swiper .swiper-slide {
  width: auto;
}
.news_unit {
  margin: 0 5px;
  margin-bottom: 10px;
}
</style>
